<template>
  <div>
    <div id="map" ref="map" style="padding-left:10px"></div>
  </div>
</template>

<script>
  export default {
    components: {},
    props: {
        //地图key
        mapKey: {
            type: String,
            default: 'UBIBZ-4RDKX-B3X4O-ZHA6W-3DXAZ-FVBLB'
        },
        locationList: {
            type: Array,
            default: []
        },
        siteLine: {
            type: Array,
            default: []
        }
    },
    data() {
        return {
           map: null, //地图实例
           //marker: null, //标记点
           up_site: require('../../assets/images/up-site.png'),
           down_site: require('../../assets/images/down-site.png'),
           site: require('../../assets/images/site.png'),
           bus_postion_icon: require('../../assets/images/map_car_icon.png')
        }
    },
    mounted() {
        this.loadScript()
    },
    methods: {
        //异步加载地图js
        loadScript() {
            this.init()
        },
        init() {
            this.$nextTick( () => {
                if (this.locationList.length > 0) {
                    //定义地图中心点坐标
                    var center = new TMap.LatLng(this.siteLine[0].lat, this.siteLine[0].lng)
                    //定义map变量，调用 TMap.Map() 构造函数创建地图
                    this.map = new TMap.Map(document.getElementById('map'), {
                        center: center,//设置地图中心点坐标
                        zoom: 12.2,   //设置地图缩放级别
                        pitch: 23.5,  //设置俯仰角
                        rotation: 45    //设置地图旋转角度
                    });
                    this.marker(this.siteLine)
                    this.polyLine(this.locationList)
                }
            })
        },
        polyLine(locationList) {
            let paths = []
            for (let i in locationList) {
                paths.push(new TMap.LatLng(locationList[i].lat, locationList[i].lng))
            }
            //创建 MultiPolyline
            var polylineLayer = new TMap.MultiPolyline({
                id: 'polyline-layer', //图层唯一标识
                map: this.map,//绘制到目标地图
                //折线样式定义
                styles: {
                    'style_blue': new TMap.PolylineStyle({
                        'color': '#3777FF', //线填充色
                        'width': 6, //折线宽度
                        'borderWidth': 5, //边线宽度
                        'borderColor': '#FFF', //边线颜色
                        'lineCap': 'butt' //线端头方式
                    }),
                    'style_red': new TMap.PolylineStyle({
                        'color': '#CC0000', //线填充色
                        'width': 6, //折线宽度
                        'borderWidth': 5, //边线宽度
                        'borderColor': '#CCC', //边线颜色
                        'lineCap': 'round' //线端头方式
                    })
                },
                //折线数据定义
                geometries: [
                    {//第1条线
                        'id': 'pl_1',//折线唯一标识，删除时使用
                        'styleId': 'style_blue',//绑定样式名
                        'paths': paths
                       // 'paths': [new TMap.LatLng(30.346842, 120.2854), new TMap.LatLng(30.380789, 120.295985), new TMap.LatLng(30.394051, 120.304415)]
                    }
                ]
            });
        },
        marker(siteLine) {
            let geometries = []
            for (let i in siteLine) {
                geometries.push({
                    id: parseInt(i)+1,
                    styleId: siteLine[i].styleId,
                    position: new TMap.LatLng(siteLine[i].lat, siteLine[i].lng),
                    content: siteLine[i].site_name
                })
            }

            new TMap.MultiMarker({
                map: this.map, // 显示Marker图层的底图
                styles: {
                    up: new TMap.MarkerStyle({
                        // 点标注的相关样式
                        width: 28, // 宽度
                        height: 28, // 高度
                        anchor: { x: 17, y: 23 }, // 标注点图片的锚点位置
                        src: this.up_site, // https://mapapi.qq.com/web/lbs/visualizationApi/demo/img/small.png标注点图片url或base64地址
                        color: '#ff0000', // 标注点文本颜色
                        size: 16, // 标注点文本文字大小
                        direction: 'bottom', // 标注点文本文字相对于标注点图片的方位
                        offset: { x: 0, y: 8 }, // 标注点文本文字基于direction方位的偏移属性
                        strokeColor: '#fff', // 标注点文本描边颜色
                        strokeWidth: 2, // 标注点文本描边宽度
                    }),
                    down: new TMap.MarkerStyle({
                        width: 28,
                        height: 28,
                        anchor: { x: 36, y: 32 },
                        src: this.down_site, //https://mapapi.qq.com/web/lbs/visualizationApi/demo/img/big.png
                        color: '#ff0000',
                        size: 16,
                        direction: 'bottom',
                        strokeColor: '#fff',
                        offset: { x: 0, y: 10 },
                        strokeWidth: 2,
                    }),
                    site: new TMap.MarkerStyle({
                        width: 28,
                        height: 28,
                        anchor: { x: 36, y: 32 },
                        src: this.site, //https://mapapi.qq.com/web/lbs/visualizationApi/demo/img/big.png
                        color: '#ff0000',
                        size: 16,
                        direction: 'bottom',
                        strokeColor: '#fff',
                        offset: { x: 0, y: 10 },
                        strokeWidth: 2,
                    }),
                    bus_postion_icon: new TMap.MarkerStyle({
                        width: 28,
                        height: 28,
                        anchor: { x: 36, y: 32 },
                        src: this.bus_postion_icon, 
                        color: '#ff0000',
                        size: 16,
                        direction: 'bottom',
                        strokeColor: '#fff',
                        offset: { x: 0, y: 10 },
                        strokeWidth: 2,
                    }),
                },
                enableCollision: true, // 开启碰撞
                geometries: geometries
                // geometries: [
                //     {
                //         id: "1",
                //         styleId: 'up', // 对应中的样式id
                //         position: new TMap.LatLng(30.346842, 120.2854), // 标注点位置
                //         content: '乔司地铁站', // 标注点文本
                //     },
                //     {
                //         id: "2",
                //         styleId: 'site',
                //         position: new TMap.LatLng(30.380789, 120.295985),
                //         content: '临平南站',
                //     },
                //     {
                //         id: "3",
                //         styleId: 'down',
                //         position: new TMap.LatLng(30.394051, 120.304415),
                //         content: '余之城生活广场',
                //     }
                // ],
            });
        }
    }
  }
</script>

<style lang="scss" scoped>

@import '@/assets/scss/common.scss'
</style>